<template>
  <div>
    <el-container>
      <el-header>
        <!-- 淘宝头部 -->
        <div class="header">
          <h1>淘宝网</h1>
          <!-- 其他头部内容 -->
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in products" :key="product.id">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="product.src" class="image">
              <div style="padding: 14px;">
                <span>{{ product.name }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ product.description }}</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'XianHuaYeMian',
  data() {
    return {
      products: [
        {
          name: 666,
          src: 'http://image.wncinema.com/img/2024-09-12/5926B327D15444C7A63B960F481A5D5A_3.jpg',
          description: 999
        },
        {
          name: 777,
          src: 'http://image.wncinema.com/img/2024-09-12/5926B327D15444C7A63B960F481A5D5A_3.jpg',
          description: 999
        }

      ] // 商品列表
    }
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await this.$http.get('/api/homepage');
        this.products = response.data;
      } catch (error) {
        console.error('Error fetching products: ', error);
      }
    }
  }
}
</script>

<style scoped>

.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 100%;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>